<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="../js/d3.v3.js"></script>
</head>
<body>
<script>
	var w = 500;
	var h = 400;
	var padding = 30;

	var svg = d3.select("body")
			.append("svg")
			.attr("width", w)
			.attr("height", h)

	var dataset = {
			x: 20,
			y: 20
		}


	var drag = d3.behavior.drag();

	drag.on("drag", function(d){
		d.x += d3.event.dx;
		d.y += d3.event.dy;
		d3.select(this).attr("transform", "translate(" + d.x + "," + d.y + ")");
	});

	var rect = svg
			.append("rect")
			.datum(dataset)
			.attr("width", 40)
			.attr("height", 40)
			.attr("stroke", "red")
			.attr("fill", "transparent")
			.attr("x", "20")
			.attr("y", "20")
			.call(drag)

</script>
</body>
</html>